<template>
  <div>
    <!-- 走马灯 -->
    <el-carousel :interval="5000" arrow="always">
      <el-carousel-item v-for="(item,index) in banners" :key="index">
        <div class="swiper" :style="`background:url('${item.url}')`"></div>
      </el-carousel-item>
    </el-carousel>
    <!-- 搜索框 -->
    <div class="search">
      <div class="nav">
        <div :class="['tabitem',{active:index === currentIndex}]" v-for="(item,index) in options" :key="index" @click="tabChange(index)">
          {{item.name}}
        </div>
      </div>
      <div class="input">
        <input type="text" v-model="searchVal" @keyup.enter="search()" :placeholder="placeholderText" />
        <i @click="search()" class="el-icon-search"></i>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      banners: [
        {
          url: 'http://157.122.54.189:9095/assets/images/th03.jfif'
        },
        {
          url: 'http://157.122.54.189:9095/assets/images/th04.jfif'
        }
      ],
      searchVal:'',
      currentIndex:0,
      options: [
        // 搜索框tab选项
        {
          name: '攻略',
          placeholder: '搜索城市',
          pageUrl: '/post?city='
        },
        {
          name: '酒店',
          placeholder: '请输入城市搜索酒店',
          pageUrl: '/hotel?city='
        },
        {
          name: '机票',
          placeholder: '请输入出发地',
          pageUrl: '/air'
        }
      ]
    }
  },
  methods: {
    tabChange(i){
      console.log(i)
      this.currentIndex = i
      if(i===2){
        this.$router.push('/air')
      }
    },
    search(){
      this.$router.push(this.options[this.currentIndex].pageUrl+this.searchVal)
    }
  },
  computed: {
    placeholderText(){
      return this.options[this.currentIndex].placeholder
    },
    air(){
      if(this.currentIndex == 2){
        return this.options[2].pageUrl
      }else{
        return ''
      }
    }
  },
}
</script>
<style lang="less" scoped>
a {
  color: #000;
  text-decoration: none;
}
.el-carousel {
  height: 600px;
  .swiper {
    height: 600px;
    background-size: 100%;
  }
  /deep/ .el-carousel__container {
    height: 600px;
  }
}
.search {
  position: absolute;
  top: 35%;
  left: 50%;
  z-index: 999;
  transform: translate(-50%, 0);
  // background: pink;
  width: 500px;
  .nav {
    display: flex;
    .tabitem{
      cursor: pointer;
    }
    a{
      display: flex;
    }
    div {
      height: 40px;
      line-height: 40px;
      background: rgba(0, 0, 0, 0.6);
      padding: 0 25px;
      position: relative;
      margin-right: 10px;
      color:#fff;
      &.active {
        background: #eeeeee;
        color:#000;
        &::after {
          border-color: #eeeeee transparent;
        }
      }
      &::after {
        position: absolute;
        content: '';
        width: 0px;
        height: 0px;
        border-color: rgba(0, 0, 0, 0.6) transparent;
        border-width: 0px 10px 40px 0px;
        border-style: solid;
        right: -10px;
      }
    }
  }
  .input {
    height: 50px;
    position: relative;
    input {
      height: 50px;
      outline: none;
      border: none;
      width: 100%;
      padding: 0 20px;
    }
    i {
      font-size: 24px;
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translate(0, -50%);
      cursor: pointer;
    }
  }
}
/deep/ .nuxt-link-exact-active {
      background: #409eff;
      color: #fff !important;
    }
</style>